<template>
    <div>
        <el-card class="!border-none p-4" shadow="never">
            <el-page-header content="加工主体信息详情" @back="$router.back()" class="text-lg font-medium text-gray-800 mb-[16px]" />
            <el-form ref="formRef" class="gap-4 flex flex-wrap mb-[-16px]" :model="queryParams" :inline="true">
                <el-form-item v-if="grade !== 3" class="w-[280px]" label="所属区域">
                    <area-picker v-model="areas"></area-picker>
                </el-form-item>
                <el-form-item class="w-[280px]" label="主体名称">
                    <el-input v-model="queryParams.entity_name" placeholder="请输入主体名称" clearable
                        @keyup.enter="resetPage" />
                </el-form-item>
                <el-form-item label="统计时段">
                    <el-select v-model="queryParams.time_type" placeholder="请选择统计时段" clearable collapse-tags filterable
                        remote :remote-method="handleTimeTypeSearch" :loading="timeTypeLoading">
                        <el-option label="第一季度" value="1" />
                        <el-option label="上半年" value="2" />
                        <el-option label="前三季度" value="3" />
                        <el-option label="全年" value="4" />
                    </el-select>
                </el-form-item>
                <el-form-item label="提交时间">
                    <daterange-picker v-model:startTime="queryParams.start_time"
                        v-model:endTime="queryParams.end_time" />
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="toSearch">查询</el-button>
                    <el-button @click="resetData">重置</el-button>
                    <export-data class="ml-4" :fetch-fun="getProcessList" :params="{...queryParams, user_id: route.query.id}"
                        :page-size="pager.size" />
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none p-4 mt-4" shadow="never">
            <div class="mb-4 text-center text-2xl font-bold">产值 (万元)合计: {{ output }}</div>
            <el-table size="large" v-loading="pager.loading" :data="pager.lists"
                style="--el-table-border-color: rgba(180, 185, 195, 2)">
                <el-table-column label="主体名称" prop="entity_name" min-width="80" align="center" />
                <el-table-column label="所属区域" prop="region" min-width="80" align="center" />
                <el-table-column label="统计时段" prop="time_type" min-width="80" align="center">
                    <template #default="{ row }">
                        <template v-if="row.time_type === 1">第一季度</template>
                        <template v-else-if="row.time_type === 2">上半年</template>
                        <template v-else-if="row.time_type === 3">前三季度</template>
                        <template v-else-if="row.time_type === 4">全年</template>
                        <template v-else>{{ row.time_type }}</template>
                    </template>
                </el-table-column>
                <el-table-column label="主要产品类型" prop="main_product_type" min-width="100" align="center" />
                <el-table-column label="产值 (万元)" prop="output" min-width="80" align="center" />
                <el-table-column label="上一年度同期产值 (万元)" prop="last_year_output" min-width="80" align="center" />
                <el-table-column label="本年预计产值(万元)" prop="current_year_estimate" min-width="50" align="center" />
                <!-- <el-table-column label="已完成产值(万元)" prop="completed_output" min-width="50" align="center" /> -->
                <el-table-column label="提交时间" prop="create_time" min-width="0" align="center" />
                <el-table-column label="操作" width="120" fixed="right">
                    <template #default="{ row }">
                        <el-button v-perms="['process.process/detail']" type="primary" link>
                            <router-link :to="{
                                path: getRoutePath('process.process/detail'),
                                query: {
                                    id: row.id
                                }
                            }">
                                详情
                            </router-link>
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-dialog v-model="dialogVisible" :title="'图片查看'" width="50%">
                <el-carousel v-if="dialogImageUrl.length" v-model="currentImageIndex" arrow="always" :autoplay="false">
                    <el-carousel-item v-for="(image, index) in dialogImageUrl" :key="index">
                        <el-image :src="image" fit="contain" style="width: 100%; height: 200px" />
                    </el-carousel-item>
                </el-carousel>
                <template #footer>
                    <el-button @click="dialogVisible = false">关闭</el-button>
                </template>
            </el-dialog>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="consumerLists">
import config from '@/config'
import { ref, reactive, onActivated } from 'vue'
import { getProcessList, getProcessOutput } from '@/api/Processed'
import { ClientMap } from '@/enums/appEnums'
import { usePaging } from '@/hooks/usePaging'
import { getRoutePath } from '@/router'

const route = useRoute()
const formRef = ref(null)
const queryParams = reactive({
    entity_name: '',
    channel: '',
    start_time: '',
    end_time: '',
    time_type: '',
    province_id: '',
    city_id: '',
    area_id: ''
})
const areas = ref()

import useUserStore from '@/stores/modules/user.ts'
const userState = useUserStore()
const grade = computed(()=> {
    return userState.userInfo.grade
})
watch(areas, (val)=> {
    queryParams.province_id = val[0] || ''
    queryParams.city_id = val[1] || ''
    queryParams.area_id = val[2] || ''
})
const resetData = ()=> {
    areas.value = []
    resetParams()
    getTotals()
}

const toSearch = ()=> {
    resetPage()
    getTotals()
}

const output = ref(0)
const getTotals = ()=> {
    getProcessOutput({...queryParams, user_id: route.query.id}).then(res=>{
        output.value = res.output
    })
}


const timeTypeLoading = ref(false)
// 处理统计时段搜索
const handleTimeTypeSearch = (query: string) => {
    if (query) {
        timeTypeLoading.value = true
        // 这里可根据实际需求添加搜索逻辑
        // 示例中简单处理，实际应用中可能需要调用 API
        setTimeout(() => {
            timeTypeLoading.value = false
        }, 500)
    }
}

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: getProcessList,
    params: queryParams,
    fixedParams: {
        user_id: route.query.id
    }
})

// 弹窗是否显示
const dialogVisible = ref(false)
// 当前查看的图片 URL
const dialogImageUrl = ref<string[]>([])
// 当前图片索引
const currentImageIndex = ref(0)

// 打开图片浏览工具
const openImageDialog = (images: string[], index: number) => {
    // 优化：避免重复调用 split 方法
    const imageList = images.map(img => img.trim()).filter(img => img)
    dialogImageUrl.value = imageList.map(img => config.baseUrl + img)
    currentImageIndex.value = index
    dialogVisible.value = true
}

// 组件激活时获取列表数据
onActivated(() => {
    getLists()
})

// 初始化获取列表数据
getLists()
getTotals()

</script>
